import type {Directive} from "vue";

/**
 * 自动滚动指令
 */
export const autoScroll: Directive = {
    // 在绑定元素的父组件
    // 及他自己的所有子节点都更新后调用
    updated(el: HTMLElement, binding) {
        if (!binding.arg) throw Error("请传入arg参数")
        // 获取arg参数执行对应操作 方便后续扩展
        switch (binding.arg) {
            case 'bottom':
                // 判断是否能滚动
                if (!isVerticalScrollable) throw Error('该元素不能纵向滚动 请设置style')
                if (!el.lastElementChild) return
                // 滚动到最后一个元素
                el.lastElementChild.scrollIntoView(false)
                break
            default:
                throw Error("当前该指令仅支持 bottom")
        }
    }
}

/**
 * 检查当前元素是否可纵向滚动
 * @param element 检查的元素
 * @returns
 */
export const isVerticalScrollable = (element: HTMLElement) => {
    const style = window.getComputedStyle(element);

    return (
        style.overflow === 'scroll' ||
        style.overflow === 'auto' ||
        style.overflowY === 'auto' ||
        style.overflowY === 'scroll'
    )
}

